<template>
    <el-card>
        <el-row type="flex" justify="space-between">
            <el-form :inline="true" label-width="200px;">
                <el-form-item>
                    <el-input
                        v-model="queryData.username"
                        size="small"
                        placeholder="请输入用户名搜索"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="clearFn" size="small">清空</el-button>
                    <el-button @click="initData" type="primary" size="small"
                        >搜索</el-button
                    >
                </el-form-item>
            </el-form>
            <!--  新增区域 -->
            <el-row>
                <el-button
                    @click="showDialog = true"
                    type="success"
                    size="small"
                    icon="el-icon-edit"
                >
                    新增</el-button
                >
            </el-row>
        </el-row>
        <!--  /新增区域 -->
        <!-- 消息提示区域 -->
        <el-alert
            :title="`共${counts}条数据`"
            :closable="false"
            type="info"
            show-icon
        >
        </el-alert>
        <!-- /消息提示区域 -->
        <!-- tale表格区域 -->

        <el-table :data="list">
            <el-table-column align="left" prop="id" label="序号">
            </el-table-column>
            <el-table-column align="left" prop="email" label="邮箱">
            </el-table-column>
            <el-table-column align="left" prop="phone" label="联系电话">
            </el-table-column>
            <el-table-column align="left" prop="username" label="用户名">
            </el-table-column>
            <el-table-column
                align="left"
                prop="permission_group_title"
                label="权限组名称"
            >
            </el-table-column>
            <el-table-column align="left" prop="role" label="角色">
                <template></template>
            </el-table-column>

            <el-table-column align="left" label="操作">
                <template slot-scope="{ row }">
                    <el-button
                        @click="editHandler(row)"
                        circle
                        size="small"
                        type="success"
                        icon="el-icon-edit"
                    ></el-button>
                    <el-button
                        v-show="row.id !== 2"
                        @click="delHandler(row.id)"
                        circle
                        size="small"
                        type="danger"
                        icon="el-icon-delete"
                    ></el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- /tale表格区域 -->
        <!-- 分页区域 -->
        <el-row type="flex" justify="end">
            <el-pagination
                style="display: right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryData.page"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="queryData.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="counts"
            >
            </el-pagination>
        </el-row>
        <!-- /分页区域 -->
        <!-- 弹框区域 -->
        <el-dialog
            :title="formData.id ? '修改用户' : '创建用户'"
            width="700px"
            :visible.sync="showDialog"
            @close="closeHandler"
        >
            <el-form
                v-if="showDialog"
                label-width="100px"
                :model="formData"
                :rules="formRules"
                ref="form"
            >
                <!-- 用户名 -->
                <el-form-item
                    style="width: 600px"
                    prop="username"
                    label="用户名"
                >
                    <el-input
                        v-model="formData.username"
                        placeholder="请输入用户名"
                    ></el-input>
                </el-form-item>
                <!-- 邮箱 -->
                <el-form-item style="width: 600px" prop="email" label="邮箱">
                    <el-input
                        v-model="formData.email"
                        placeholder="请输入邮箱"
                    ></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item
                    v-if="!formData.id"
                    style="width: 600px"
                    prop="password"
                    label="密码"
                >
                    <el-input
                        type="password"
                        v-model="formData.password"
                        placeholder="请输入密码"
                    ></el-input>
                </el-form-item>
                <!-- 角色 -->
                <el-form-item style="width: 600px" prop="role" label="角色">
                    <el-input
                        v-model="formData.role"
                        placeholder="请输入角色"
                    ></el-input>
                </el-form-item>
                <!-- 权限组名称 -->
                <el-form-item style="width: 600px" label="权限组名称">
                    <el-select
                        @focus="getPermissionList"
                        v-model="formData.permission_group_id"
                        placeholder="请选择"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 联系电话 -->
                <el-form-item
                    style="width: 600px"
                    prop="phone"
                    label="联系电话"
                >
                    <el-input
                        v-model="formData.phone"
                        placeholder="请输入联系电话"
                    ></el-input>
                </el-form-item>
                <!-- 介绍  -->
                <el-form-item style="width: 600px" label="介绍">
                    <el-input
                        type="textarea"
                        :rows="4"
                        v-model="formData.introduction"
                        placeholder="请输入介绍"
                    ></el-input>
                </el-form-item>
            </el-form>
            <el-row type="flex" justify="center">
                <el-button @click="showDialog = false" size="small"
                    >取消</el-button
                >
                <el-button @click="submitFn" type="primary" size="small"
                    >提交</el-button
                >
            </el-row>
        </el-dialog>
        <!-- /弹框区域 -->
    </el-card>
</template>

<script>
import {
    getUserListApi,
    getUserInfoApi,
    addUserApi,
    updateUserApi,
    delUserApi,
} from "@/api/user";

// 获取权限请求
import { getPermissionListApi } from "@/api/xxd-api/index";
export default {
    name: "UserPage",
    data() {
        return {
            list: [],
            queryData: {
                page: 1,
                username: "",
                pagesize: 10,
                disabled: 0,
            },
            showDialog: false,
            counts: 0,
            formData: {
                username: "",
                password: "",
                phone: "",
                role: "",
                permission_group_id: '',
                avatar: "",
                email: "",
                introduction: "",
                // sex: 1,
            },
            formRules: {
                username: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur",
                    },
                    {
                        min: 3,
                        max: 6,
                        message: "用户名在3-6位",
                        trigger: "blur",
                    },
                ],
                email: [
                    {
                        required: true,
                        message: "请输入邮箱",
                        trigger: "blur",
                    },
                    {
                        pattern: /^\w+@[A-Z,a-z,0-9]+.com$/,
                        message: "邮箱格式不正确",
                        trigger: "blur",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "blur",
                    },
                    {
                        min: 6,
                        max: 10,
                        message: "密码在6-10位",
                        trigger: "blur",
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入手机号",
                        trigger: "blur",
                    },
                    {
                        pattern: /^1[3|4|5|6|7|8|9]\d{9}$/,
                        message: "手机号格式不正确",
                        trigger: "blur",
                    },
                ],
            },
            options: [],
        };
    },
    created() {
        this.initData();
    },
    methods: {
        // 获取用户列表
        async initData() {
            try {
                let { counts, list } = await getUserListApi(this.queryData);
                //    console.log(res);
                this.list = list;
                this.counts = counts;
            } catch (error) {
                console.log(error);
            }
        },
        // 每页数量改变
        handleSizeChange(val) {
            console.log(val);
            this.queryData.pagesize = val;
            this.initData();
        },
        // page页改变
        handleCurrentChange(val) {
            console.log(val);
            this.queryData.page = val;
            this.initData();
        },
        // 新增或修改
        async submitFn() {
            try {
                await this.$refs.form.validate();
            } catch (error) {
                return console.log(error);
            }
            try {
                if (this.formData.id) {
                    await updateUserApi(this.formData);
                } else {
                    await addUserApi(this.formData);
                }
            } catch (error) {
                return console.log(error);
            }
            this.$message.success("操作成功");
            this.showDialog = false;
            this.initData();
        },
        // 获取权限列表
        async getPermissionList() {
            let { list } = await getPermissionListApi({
                page: 1,
                pagesize: 1000,
                title: "",
            });
            console.log(list);
            this.options = list
        },
        // 点击修改用户信息回显
        async editHandler(row) {
            console.log(row);
            let res = await getUserInfoApi(row.id);
            console.log(res);
            this.formData = res;
           // 把该用户所拥有的权限名id对应的名字回显到页面
            this.formData.permission_group_id = row.permission_group_title
            this.showDialog = true;
        },
        // 删除用户
        async delHandler(id) {
            try {
                await this.$confirm("确定删除吗");
                await delUserApi(id);
                this.$message.success("删除成功");
                // 边缘问题
                if(this.queryData.page>1&&this.list.length===1){
                    this.queryData.page--;
                }
                this.initData();
            } catch (error) {
                console.log(error);
            }
        },
        // 清空input
        clearFn() {
            this.queryData = {
                page: 1,
                username: "",
                pagesize: 10,
                disabled: 0,
            };
            this.initData();
        },
        // 弹框关闭
        closeHandler() {
            this.formData = {
                username: "",
                password: "",
                phone: "",
                role: "",
                permission_group_id: '',
                avatar: "",
                email: "",
                introduction: "",
                // sex: 1,
            };
        },
    },
};
</script>

<style lang="scss" scoped>
</style>
